<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/mui.css"/>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css"/>
		<link rel="stylesheet" type="text/css" href="../css/lcs-mui-numbox.css"/>
		<link rel="stylesheet" type="text/css" href="../css/lcs-pop.css"/>
		<style type="text/css">
			.mdata{
				width: 100%;
				background-color: white;
				padding: 0.5em;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
			.mimg{
				margin: 0.5em;
			}
			.mimg>img{
				width: 70px;
				height: 70px;
			}
			.mtext{
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-direction: column;
			}
			.mtext>span{
				padding: 0.2em;
			}
			.dlistcss{
				width: 100%;
				background-color: white;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-radius: 20px;
			}
			.flexcr{
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				flex-direction: column;
				width: 50%;
			}
			.flexcr>span{
				padding: 0.5em;
			}
			.mbut{
				width: 80%;
				text-align: center;
			}
			.mbut>button{
				border: 0;
			    border-bottom:1px solid #C7C7C7 ;
			    background-color: white;
			}
			.mui-left input[type=checkbox]{
    position: absolute;
    top: 40%;
    right: 20px;
    display: inline-block;
    width: 28px;
    height: 26px;
    border: 0;
    outline: 0!important;
    background-color: transparent;
    -webkit-appearance: none;
}



.listdivmain{
	height: auto !important;	
	padding: 0.5em;
}
.listdivmain>div {
    width: 90%;
    padding: 0.2em 0.5em;
    border-bottom:0;
    margin: 0.2em auto;
}
.listdivmain>div:first-child {
    border-bottom: 1px solid #c7c7c7;
}
.listdivmain>div>div {
	padding: 0.5em 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cdiv{
	text-align: center;
	color: #c7c7c7;
}



input[type=text]{
    line-height: 21px;
    width: 40% !important;
    height: 30px;
    margin-bottom: 0;
    padding: 2px 5px;
    -webkit-user-select: text;
    border: 0 !important;
    border-bottom: 1px solid #C7C7C7 !important;
    outline: 0;
    background-color: white !important;
    -webkit-appearance: none;
}

input[type=checkbox]{
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 1.5em;
		height: 1.5em;
        border: 1px solid #00bfff;
        outline: none;
        cursor: pointer;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
    }
 
    /**
    * 选中之后的样式
    **/
   
    input[type=checkbox]:after{
        content: '';
        position: absolute;
        width: 1em;
        height: 1em;
        display:block;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: #00bfff;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        transform: scale(0);
        -webkit-transition : all ease-in-out 300ms;
        -moz-transition : all ease-in-out 300ms;
        transition : all ease-in-out 300ms;
    }
    
    input[type=checkbox]:checked:after{
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
    }
    input[type=number]{
    	margin-bottom: auto;
    	padding: 5px;
    }
.opened-for-codepen{
	background-color: white;
	padding: 0.5em;
}
.opened-for-codepen>div{
	padding: 0.2em;
}
.flex-row-around{
	width: auto !important;
}

		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">次卡扣减</h1>
		</header>
		<div class="mui-content">
		    <div class="mdata hidden" id="memberlist">
		    	
		    </div>
		    
		    <div class="">
		    	<div class="pad11">
		    		选择计次项目
		    	</div>
		    	<div class="dlist" id="dlistid">
		    		
		    	</div>
		    </div>
		    
		    <div class="fgd"></div>
		    <div class="footdiv">
		    	<div class="fleft">
		    		<div class="mui-input-row mui-checkbox">
		    		    <label>全选</label>
		    		    <input name="Checkbox" id="checkall" type="checkbox">
		    		</div>
		    		<div id="nums">
		    			
		    		</div>
		    	</div>
		    	<div id="kouid" class="fright">
		    		确认扣次
		    	</div>
		    </div>
		    <div id="popover" class="mui-popover">
			   <div class="listdiv">
			   		<div class="listdivmain" id="listdivmain">
							<div class="">
								<div class="flex-row-around">
                                	<span id="">员工：</span>
                                	<span id="memberid" data-mid="">选择</span>
								</div>
								<div class="flex-row-around">
                                	<span id="">职位：</span>
									<span id="rname"></span>
								</div>
								<div class="flex-row-around">
									<span id="">指定：</span>
									<input id="appoint" type="checkbox">
								</div>
							</div>
							<div class="">
								<div class="flex-row-around">
									<span id="">提成率</span>
									<input id="proportion" type="text">
									<span id="">%</span>
								</div>
								<div class="flex-row-around">
									<span id="">提成金额</span>
									<input id="amount" type="text">
									<span id="">元</span>
								</div>
							</div>
							<div class="">
									<button id="addygbut" type="button" class="mui-btn mui-btn-blue mui-btn-block">添加</button>
							</div>
			   		</div>
			   </div>
			</div>
		</div>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var mid = 0,//会员id
			clist = [],	//次卡数据
			index = 0,	//选择员工提成的下标
			product_id = 0,	//商品id
			klist = [],	//需要扣次的数组数据
			is_appoint = 1;	//是否指定
			
			
			var appoint_money = 0, 		//指定提成金额
			    appoint_percent = 0,		//指定提成比例
			    non_appoint_money = 0,	//非指定金额
			    non_appoint_percent = 0,	//非指定比例
			    tc_type = 1,				//提成类型 比例或金额
			    card_money = 0;				//次卡金额
			window.onload = function(){
				mid = getrequest().mid;
				console.log(mid);
				
				//全选按钮
				g('checkall').addEventListener('change',function() {
		            var listBox = mui('.listcheckbox');
		            if (this.checked) {
		                listBox.each(function(index) {
		                    this.checked = true;
		                    clist[index].checked = true;
		                })
		            } else {
		                listBox.each(function(index) {
		                    this.checked = false;
		                    clist[index].checked = false;
		                })
		            }
		            getnums();
		        })
				//选择员工提成
				mui("body").on("tap",".ckickbut",function(e){
					index = this.getAttribute("data-index");
					card_money = this.getAttribute("card_money");
					product_id = this.getAttribute("data-id");
					mui('#popover').popover('toggle',document.getElementById("popover"));
					
				})
				
				//数量
				mui('body').on('change','.mui-input-numbox', function(){  
							var index = this.getAttribute("data-index");
							clist[index].count = parseInt(this.value);
            	}); 
            	
            	//确认扣次，开始计算提成
            	g("kouid").addEventListener("tap",function(){
            		mui.confirm("是否确认扣卡","",["取消","确认"],function(e){
            			if(e.index == 1){
            				console.log(clist);
            				var card = [];
            				clist.forEach(function(item,index){
            					if(item.checked && item.checked == true){
            						//console.log(item);
            						if(item.count && item.count > 0){
            							var str = {
            								id:item.id,
            								count:item.count,
            								percent:[],
            							}
            							if(item.card && item.card.length > 0){
            								item.card.forEach(function(items,index){
            									var str2 = {
            										employee_id:items.employee_id,
            										percent_point:items.percent_point||0,
            										percent_money:(items.percent_money*item.count).toFixed(2),
            									}
            									str.percent.push(str2);
            								})
            							}
            							card.push(str);
            						}
            					}
            				})
            				var data = {
            					url:"/api/member_card/deduct",
            					data:{
            						access_token:acctoken(),
            						member_id:mid,
            						card:card,
            						remark:"",
            					}
            				}
            				console.log(data);
            				//return;
            				ajax(data,function(res){
            					console.log("次卡扣减",res);
            					mui.toast(res.msg);
            					getmember();
            				})
            				
            				
            			}
            		})
            	})
            	
            	//添加员工提成
            	$("#addygbut").on("tap",function(e){
            		// is_appoint
            		console.log("添加员工")
            		var flag = $("#appoint")[0].checked;
            		var avalue = g("amount").value;
            		var pvalue = g("proportion").value;
            		var ename = g("memberid").innerText;
            		var edata = {
            			"ename":ename,
            			"employee_id":g("memberid").datamid, // 获取提成的员工id
	    				"is_appoint":flag?1:2, // 是否指定
	    				"percent_point":pvalue, // 提成点
	    				"percent_money":avalue// 提成金额
            		}
            		//
            		mui('#popover').popover('hide');
            		if(!clist[index].card){
            			clist[index].card = [];
            		}
            		clist[index].card.push(edata);
            		console.log(clist);
            		appoint_money = 0;
	                appoint_percent = 0;
	                non_appoint_money = 0;
	                non_appoint_percent = 0;
	                tc_type = 1;
            		setappoint("","");
            		g("memberid").innerHTML = "选择";
					g("rname").innerHTML = "";
            		g("proportion").value = "";
			    	g("amount").value = "";
			    	g("appoint").checked = false;
            		setmember_card(clist);
	            })
            	
            	
            	//设置提成
				$("#appoint").change(function(e){
                    		console.log("设置是否指定");
                    		var money = appoint_money,
	                       		per = appoint_percent,
	                       		non_money = non_appoint_money,
	                       		non_percent = non_appoint_percent,
	                       		type = tc_type;
                    		//指定
                    		 	if(type == 1){
                    		 		var p = 0;
                    		 		console.log($(this)[0].checked);
	                       			if($(this)[0].checked){
	                       				is_appoint = 1;
	                       				p = per;
	                       			}else{
	                       				is_appoint = 2;
	                       				p = non_percent;
	                       			}card_money
	                       			var val = calculate(card_money,p);
	                        		setappoint(p,val);
                    		 	}else{
                    		 		var val = 0;
	                       			if($(this)[0].checked){
	                       				is_appoint = 1;
	                       				val = money;
	                       			}else{
	                       				is_appoint = 2;
	                       				val = non_money;
	                       			}	
                    		 		//提成设置的金额
	                        		setappoint("",val);
                    		 	}
                    	})
            	
            	
				getmember();
				getemployee();
			}
			
			//获取员工列表 ，获得提成数据
			function getemployee(){
				var data = {
					url:"/api/employee/lst",
					data:{
						access_token:acctoken()
					}
				}
				ajax(data,function(res){
					console.log("员工列表",res);
					var list = [];
					var datalist = res.data.data;
					for(var i = 0;i < datalist.length; i++){
						var rid = 0, rname = '';
						if(datalist[i].role&&datalist[i].role.id){
							rid = datalist[i].role.id;
							rname = datalist[i].role.role_name
						}
				 		var str = {
				 			value:datalist[i].id,
				 			text:datalist[i].username,
				 			rid:rid,
				 			rname:rname
				 		}
						list.push(str);
					}
					setpopover(list);
				})
			}
			
			//设置pop
			function setpopover(list){
				var addmemberidPicker = new mui.PopPicker();
				console.log("设置员工");
				console.log(list);
				addmemberidPicker.setData(list);
				var level = g("memberid");
				var rname = g("rname");
                level.addEventListener('tap', function(event) {
                    addmemberidPicker.show(function(items) {
                        level.innerText = items[0].text;
                        level.datamid = items[0].value;
                        var rid = items[0].rid;
                        level.innerHTML = items[0].text;
                        rname.innerHTML = items[0].rname;
                        //获取商品角色提成关系
                       	var data = {
                       		url:"/api/employee/get_percent",
                       		data:{
                        		access_token:acctoken(),
                        		role_id:rid,
                        		product_id:product_id,
                        		product_type:3,
                        		is_card:1
                        	}
                        }
                       	ajax(data,function(res){
                       		//是否指定
                       		console.log("角色提成关系",res)
                       		appoint_money = parseFloat(res.data.appoint_money);
                       		appoint_percent = parseFloat(res.data.appoint_percent);
                       		non_appoint_money = parseFloat(res.data.non_appoint_money);
                       		non_appoint_percent = parseFloat(res.data.non_appoint_percent);
                       		tc_type = res.data.type;
                       		if(res.data.type == 1){
                        		var val = calculate(card_money,non_appoint_percent)
                        		setappoint(non_appoint_percent,val);
                        	}else{
                        		setappoint('',non_appoint_money);
                        	}
                       	})
                    });
					});
			}
			
			//用于计算 提成金额
			function calculate(m,p){
				return (m*(p/100)).toFixed(2);
			}
			
			//设置员工提成数值
			function setappoint(value1,value2){
				var prop = g("proportion"),
	            amt = g("amount");
	            prop.value = value1;
			    amt.value = value2;
			}
					
			//准备添加 角色提成
			function addf(e){
				var that = this;
				product_id = e.getAttribute("product");
				console.log(e.getAttribute("index"))
				that.index = e.getAttribute("index");
				mui('#popover').popover('toggle',document.getElementById("popover"));
			}
			//复选框按钮
			function setcheckbox(e){
				var id = e.getAttribute("data-id");
				var index = e.getAttribute("data-index")
				if(e.checked){
					clist[index].checked = true;
				}else{
					document.getElementById('checkall').checked = false;
					clist[index].checked = false;
				}
				getnums();
			}
			function getnums(){
				var nums = 0;
				var listBox = mui('.listcheckbox');
				listBox.each(function() {
					if(this.checked){
						nums++;
					}
		        })
				document.getElementById('nums').innerHTML = "共"+ nums +"种次卡";
			}
			//获取会员详情
			function getmember(){
				var data = {
					url:"/api/member/detail",
					data:{
						access_token:acctoken(),
						id:mid
					}
				}
				ajax(data,function(res){
					console.log("会员详情",res);
					setmember(res.data);
					clist = res.data.member_card
					setmember_card(clist);
					//getmember_card()
					
				})
			}
			//获取会员卡详情，暂时弃用
			function getmember_card(){
				var data = {
					url:"/api/member_card/detail",
					data:{
						access_token:acctoken(),
						member_id:mid,
					}
				}
				ajax(data,function(res){
					console.log("会员卡详情",res);
					//setmember_card(res.data.member_card);
				})
			}
		    			
			//设置头部会员信息
			function setmember(data){
				var memberlist = g("memberlist");
				memberlist.classList.remove("hidden");
				var str = '<div class="mimg">'+
		    		'<img class="border50" ';
		    		if(data.images&&data.images.path_name){
		    			str += 'src="'+data.images.path_name+'"/>';
		    		}else{
		    			str += 'src="../img/member-header.png"/>';
		    		}
		    		str += '</div><div class="mtext"><span id="">'+
		    		data.username+
		    		'</span><span class="fe08">卡号：'+
		    			data.card_number+ ' \t|\t 卡余额：' + data.stay_money+
		    		'</span><span class="fe08">会员等级：';
		    		if(data.member_level){
		    			str += data.member_level.member_level;
		    		}
		    		str += '<span style="padding-left: 1em;">积分：'+
		    		data.use_score+
		    		'</span></span></div>';
				memberlist.innerHTML = str;
			}
			
			//设置次卡数据
			function setmember_card(data){
				var str = '';
				if(data.length > 0){
					for(var i = 0; i < data.length; i++){
					str += '<div class="mui-input-row mui-checkbox mui-left"><label>'+
		    		  	'<div class="dlistcss"><div class="flexcr"><span id="">'+
		    		  	data[i].card_name+
		    		  	'</span><span class="fe08">可用次数：'+
		    		  	data[i].surplus_count+
		    		  	'</span><span class="fe08">有效时间'+
		    		  	data[i].expire_time+
		    		  	'</span></div><div class="flexcr">'+
		    		  	'<div class="mui-numbox" data-numbox-step="1" data-numbox-min="';
		    		  	if(data[i].count && data[i].count > 0){
		    		  		str += data[i].count;
		    		  	}else{
		    		  		str += '0';
		    		  	}
		    		  	str +='" data-numbox-max="'+data[i].surplus_count+'">'+
		    		  	'<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>'+
		    		  	'<input class="mui-input-numbox" data-index="'+i+'" type="number" />'+
		    		  	'<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>'+
		    		  	'</div><div class="mbut">'+
		    		  	'<button type="button" card_money="'+data[i].card_money+'" data-id="'+data[i].id+'" data-index="'+i+'" class="ckickbut">';
		    		  	if(data[i].card){
		    		  		data[i].card.forEach(function(item,index){
		    		  			if(data[i].card.length > index+1){
		    		  				str += item.ename+','
		    		  			}else{
		    		  				str += item.ename;
		    		  			}
		    		  		})
		    		  	}else{
		    		  		str += '设置员工提成';
		    		  	}
		    		  	str += '</button>'+
		    		  	'</div></div></div></label>'+
		    		    '<input name="checkbox1" data-id="'+data[i].id+'" '+
		    		    'data-index="'+i+'" class="listcheckbox" type="checkbox" ';
		    		    if(data[i].checked && data[i].checked == true){
		    		    	str += 'checked';
		    		    }
		    		    str += ' onchange="setcheckbox(this)"></div>';
					}
				}else{
					str = '<div class="nolistdiv">暂无卡次</div>';
				}
				
				g("dlistid").innerHTML = str;
				mui('.mui-numbox').numbox();
				
			}
			
			
		</script>
	</body>

</html>